<!--- 上传 --->
<template>
  <el-dialog
    v-model="uploadVisible"
    title="上传附件"
    width="30%"
    :before-close="handleClose"
  >
    <div class="wx-upload-dialog">
      <el-upload
        ref="uploadRef"
        multiple
        drag
        v-model:file-list="fileList"
        :auto-upload="false"
        :on-change="fileChange"
        :on-exceed="handleExceed"
        :before-remove="handleRemove"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        <template #tip>
          <!-- <div class="el-upload__tip">提示：仅支持.eml 文件</div> -->
        </template>
      </el-upload>
    </div>

    <div style="text-align: center">
      <el-button
        type="primary"
        class="btn-primary"
        @click="submit"
        :loading="loading"
        >提交</el-button
      >
    </div>
  </el-dialog>
</template>
<script setup>
import { UploadFilled } from "@element-plus/icons-vue";
import { updateApi } from "@/plugins/api/customer/manage/pool";

let ruleForm = ref({});

//弹窗
let uploadVisible = ref(false);
function handleClose() {
  uploadVisible.value = false;
}
//上传超出时
function handleExceed(files, uploadFiles) {
  ElMessage.warning("文件最多上传1个！");
}
// 文件删除时
function handleRemove() {}

// 上传成功时的钩子函数
function fileChange(file, fileArr) {
  // const FILE_NAME = file.name;
  // if (FILE_NAME.substring(FILE_NAME.lastIndexOf(".")) !== ".eml") {
  //   ElMessage.warning("仅支持.eml文件");
  //   fileList.value.forEach((item, i) => {
  //     if (item.uid == file.raw.uid) {
  //       fileList.value.splice(i, 1);
  //     }
  //   });
  //   return false;
  // }
}
let loading = ref(false);
let fileList = ref([]);
let ruleFormRef = ref(null);
const emit = defineEmits(["updateList"]);
function submit() {
  if (fileList.value.length == 0) {
    ElMessage.warning("请上传文件！");
    return;
  }

  loading.value = true;
  let params = new FormData();

  fileList.value.forEach((element) => {
    params.append("file", element.raw);
  });

  updateApi(params)
    .then((data) => {
      ElMessage.success("上传成功！");
      fileList.value = [];
      emit("updateList");
      loading.value = false;
      uploadVisible.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
function initFun() {
  fileList.value = [];

  loading.value = false;
  uploadVisible.value = true;
}
function closeBtn() {
  uploadVisible.value = true;
}
defineExpose({
  initFun,
});
onMounted(() => {});
</script>
<style scoped lang="scss">
.wx-upload-dialog {
  overflow: hidden;

  :deep(.el-form-item) {
    width: calc(50% - 10px);
    margin-right: 0px;
  }

  :deep(.el-upload-dragger) {
    padding: 20px 0 !important;
    // background: #0b3f67 !important;
  }

  .el-upload__text {
    // color: white;
    margin-bottom: 10px;
  }

  .el-upload__tip {
    font-size: 12px;
    font-weight: 400;
    color: #b3cedd;
    text-align: center;
  }

  .btnSupect :deep(.el-form-item__content) {
    justify-content: right;
  }
}
</style>
